<template>
  <Layout class-name="bgff layout-bg goods showH">
    <fa-navbar title="开购吧" :border-bottom="false"></fa-navbar>
    <view class="u-p-20 bg-white">
    	<fa-orderby-select :category-id="category_id" @change="change" @setType="setType"></fa-orderby-select>				
    </view>
    <view class="goods-list" :class="'type'+type">
    	<view class="item" v-for="(item, index) in goods" :key="index" @click="goPage('/pages/goods/detail?id=' + item.id)">
    		<view class="images"><image :src="item.image || vuex_config.default_goods_img" mode="aspectFill"></image></view>
    		<view class="div flex-1">
          <view class="u-p-15 name">
          	<text class="u-line-2">{{ item.title }}</text>
          </view>
          <view class="foot u-flex u-row-between u-tips-color">
            <view class="price f26">
            	<text>￥{{ item.price }}</text>
            </view>
          	<!-- <view class="f22">
          		<text class="u-m-r-10">已售</text>
          		<text>{{ item.sales }}</text>
          	</view> -->
          </view>
        </view>
    	</view>
    	<!-- 空数据 -->
    	<view class="u-flex u-row-center fa-empty top-15" v-if="!goods.length">
    		<image src="../../static/image/data.png" mode=""></image>
    		<view class="u-tips-color">暂无更多的商品数据~</view>
    	</view>
    </view>
    <!-- 加载更多 -->
    <view class="u-p-b-30" v-if="goods.length"><u-loadmore bg-color="#f4f6f8" :status="has_more ? status : 'nomore'" /></view>
    <!-- 回到顶部 -->
    <u-back-top :scroll-top="scrollTop" :icon-style="{ color: theme.bgColor }" :custom-style="{ backgroundColor: theme.lightColor }"></u-back-top>
  </Layout>
</template>

<script>
export default {
	onLoad(e) {
		this.category_id = e.category_id || '';
		this.keyword = e.keyword || '';
		this.getGoods();
	},
	data() {
		return {
			category_id: '',
			goods: [],
			scrollTop: 0,
			status: 'loadmore',
			is_update: false,
			has_more: false,
			page: 1,
			keyword: '',
			query:{},
      type:1
		};
	},
	methods: {
    setType(e){
      this.type = e
    },
		search(e) {
			this.page = 1;
			this.is_update = true;
			this.keyword = e;
			this.getGoods();
		},
		change(query){					
			this.query = query;
			this.page = 1;
			this.is_update = true;
			this.getGoods();
		},
		getGoods() {
			this.$api.getGoodsList({ category_id: this.category_id, page: this.page, keyword: this.keyword,...this.query }).then(res => {
				if (res.code == 1) {
					if (this.is_update) {
						this.goods = [];
						this.is_update = false;
					}
					this.goods = [...this.goods, ...res.data.data];
					this.has_more = res.data.current_page < res.data.last_page;
				}
			});
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
    getApp().setNavFixed(this,e)
	},
	onReachBottom() {
		if (this.has_more) {
			this.status = 'loading';
			this.page++;
			this.getGoods();
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
</style>
<style lang="scss" scoped>
.goods-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 30rpx;
  &.type1{
    .item{
      width: 100%; display: flex; align-items: center; justify-content: space-between;
      .images{width: 200rpx; min-width: 200rpx; height: 200rpx; border-radius: 20rpx; margin-right: 20rpx; overflow: hidden;}
      .name {
      	min-height: 160rpx;
      }
    }
    
  }
  &.type2{
    .item{
      width: calc((100vw - 90rpx) / 2);
      .images{height: 335rpx; border-radius: 20rpx; overflow: hidden;}
      .name {
      	min-height: 110rpx;
      }
    }
  }
	.item {
		
		margin-bottom: 30rpx;
		border-radius: 10rpx;
		overflow: hidden;
		.price{font-weight: bold;}
		.foot {
			padding: 0 15rpx;
		}
		.images {
			width: 100%;
			height: 200rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.market_price {
			text-decoration: line-through;
			margin-left: 10rpx;
		}
	}
}
</style>
